<template>
  <!-- 修改项目收比组件 -->
  <div class="editRatio-box">
    <div class="conditionsTxt">
        <h3>
            <p>步骤</p>
            <p>事项</p>
            <p>收比（%）</p>
        </h3>

        <template v-for="group in step">
            <h4>{{group.group}}</h4>
            <ul>
                <li v-for="list in group.children" :key="list.id">
                    <i>{{list.no > 9 ? list.no : "0" + list.no}}</i>
                    <p>{{list.name}}</p>
                    <el-input v-model.number="list.scale"></el-input>
                </li>
            </ul>
        </template>
    </div>
    <div class="addSubBtn">
        <SubBtn>
            <template slot="btn">
                <el-button round @click="reset">重置</el-button>
                <el-button round class="addBtn" @click="submit">提交</el-button>
            </template>
        </SubBtn>
    </div>
  </div>
</template>

<script>
import SubBtn from "@/components/subBtn/subBtn.vue"
import {switchTree} from "@/wss/utils/wss.js";
import { getProjectGetInfoApi,editProjectApi } from "@/wss/newApi_3-24/doc/project.js"
export default {
    props:{
        orderInfo: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    components:{SubBtn},
    data(){
        return{
            step:[],//步骤的数据
            typeId:'',//项目typeid
            temData:[],// 暂存的数据
        }
    },
    mounted(){
        this.getProjectGetInfo() // 获取项目的信息
    },
    watch:{
        //监控当切换的时候重新唤起项目的信息
        orderInfo(newValue,oldValue){
            this.getProjectGetInfo() // 获取项目的信息
        },
    },
    methods:{
        // 获取项目的信息
        async getProjectGetInfo(){
            let result = await getProjectGetInfoApi({id:this.orderInfo.goodsId})
            if(result.code == 200){
                // 获取项目的typeId
                this.typeId = result.data.typeId

                //根据no字段排序
                let lc = result.data.flows.sort((a, b) => Number(a.no)- Number(b.no))
                // 步骤： 转换树形结构
                this.step = switchTree(lc);
                // 把数组先保存起来,关闭抽屉和重置的时候还原旧数据
                this.temData = JSON.parse(JSON.stringify(this.step))
            }
        },

        // 项目修改接口
        async editProject(){
            let step = JSON.parse(JSON.stringify(this.step))
            let project = {
                id: this.orderInfo.goodsId,
                flows:[],
                changeHistories: [
                    {
                        changeType: '3',
                    }
                ],
            }
            step.forEach(item=>{
                item.children.forEach(item=>{
                    project.flows.push(item)
                })
            })
            let result = await editProjectApi(project)
            if(result.code == 200){
                this.$message({type: "success",message: '提交成功！',});
            }
        },

        //点击重置按钮
        reset(){
            // 关闭抽屉和重置的时候还原旧数据
            this.step = JSON.parse(JSON.stringify(this.temData))
        },

        // 点击提交按钮
        async submit(){
            await this.editProject() // 项目修改接口
            await this.getProjectGetInfo() // 重新获取项目的信息
        },
    },
}
</script>

<style scoped>
ul,h3,h4,p{
    margin: 0;
    padding: 0;
    list-style: none;
}

.editRatio-box{
    margin-top: 10px;
    margin-bottom: 60px;
}
.conditionsTxt {
    padding: 0 20px;
}
.conditionsTxt h3{
    display: flex;
    font-size: 12px;
    font-weight: 600;
    color: #909AAA;
    border-bottom: 1px solid #EBEEF5;
    padding-bottom: 15px;
}
.conditionsTxt h3>p:first-child{
    width: 50px;
}
.conditionsTxt h3>p:nth-child(2){
    flex: 1;
}
.conditionsTxt h3>p:nth-child(3){
    width: 80px;
}
.conditionsTxt h4{
    font-size: 14px;
    font-weight: 600;
    color: #2E3F5E;
    padding: 15px 0;
    border-bottom: 1px solid #EBEEF5;
}
.conditionsTxt ul>li{
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 6px 0;
    border-bottom: 1px solid #EBEEF5;
    color: #2E3F5E;
}
.conditionsTxt ul>li i{
    display: block;
    width: 50px;
    font-style: normal;
}
.conditionsTxt ul>li p{
    flex: 1;
}
.conditionsTxt ul>li .el-input{
    width: 90px;
}
</style>
<style scoped>
/* 底部按钮 */
::v-deep .addSubBtn .subBtn{
    padding: 10px 30px;
}
::v-deep .statusBox .addSubBtn .subBtn{
    align-items: center;
}
::v-deep .statusBox .addSubBtn .subBtn .payable{
    font-size: 14px;
    font-weight: 600;
    color: #333333;
}
::v-deep .statusBox .addSubBtn .subBtn .payable>b{
    font-size: 18px;
    color: #F87A23;
}
::v-deep .statusBox .addSubBtn .subBtn .payable>span{
    color: #999999;
    font-weight: 400;
}
</style>